﻿@{
    ViewBag.Title = "EFT Helper";
}

<h2>Bank Draft Helper</h2>

@section Scripts {
    <link rel="stylesheet" href="~/Content/themes/base/jquery-ui.min.css" />
    <script src="~/Scripts/jquery-ui-1.12.0.min.js"></script>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/app/efthelper-controller.js"></script>
}

<hr />

<div ng-app="EftHelperApp" ng-controller="EftHelperController" class="row">
    <div>
        <dl class="dl-horizontal">
            <dt><label for="Primary">Members:</label></dt>
            <dd>
                <label class="checkbox-inline"><input type="checkbox" name="Primary" id="Primary" checked>Primary</label>
                <label class="checkbox-inline"><input type="checkbox" name="AdditionalAdult" id="AdditionalAdult">Additional Adult</label>
                <label class="checkbox-inline"><input type="checkbox" name="Nanny" id="Nanny">Nanny</label>
                <label class="checkbox-inline"><input type="checkbox" name="Nanny2" id="Nanny2">Nanny 2</label>
            </dd>

            <dt><label for="NumberOfChildren">No. of Children:</label></dt>
            <dd>
                <input type="text" id="NumberOfChildren" readonly style="border:0; font-weight:bold;">
                <div id="NumberOfChildrenSlider" style="width: 200px; margin: -15px 20px"></div>
            </dd>

            <dt><label for="EnrollmentDiscountAmount">Enrollment Discount:</label></dt>
            <dd>
                <label class="radio-inline"><input type="radio" name="EnrollmentDiscountOption" id="EnrollmentDiscountPercent" checked>Percentage</label>
                <label class="radio-inline"><input type="radio" name="EnrollmentDiscountOption" id="EnrollmentDiscountDollar">$ Amount</label>
                &nbsp;
                <input name="EnrollmentDiscountAmount" id="EnrollmentDiscountAmount" value="0" style="width: 50px">
            </dd>

            <dt><label for="Location">Location:</label></dt>
            <dd>
                <select class="form-control" name="Location" id="Location" required ng-model="site">
                    <option value="" disabled selected>-- Select Location --</option>
                    <option ng-repeat="site in sites | orderBy: 'siteName'"
                            ng-if="site.siteName !== null"
                            value="{{site.siteId}}">
                        {{site.siteName}}
                    </option>
                </select>
            </dd>

            <dt><label for="PaymentType">Payment Type:</label></dt>
            <dd>
                <select class="form-control" name="PaymentType" id="PaymentType" required>
                    <option value="" disabled selected>-- Select Payment Type --</option>
                    <option value="bank">Bank Draft</option>
                    <option value="credit">Credit Card</option>
                    <option value="debit">Debit Card</option>
                </select>
            </dd>

            <dt><label for="ProRatedDueDate">Join Date:</label></dt>
            <dd><input class="form-control" type="text" id="ProRatedDueDate"></dd>
        </dl>

        <button id="Calculate" class="btn btn-primary btn-default" ng-click="calculate()">Calculate</button>
    </div>

    <div id="Results" class="table-responsive" style="display: none">
        <hr />

        <table class="table">
            <thead>
                <tr>
                    <th></th>
                    <th><span ng-bind="DiscountSurcharge"></span></th>
                    <th>Totals Before <span ng-bind="DiscountSurcharge"></span></th>
                    <th>Totals<span ng-bind="NoDiscountSurcharge"></span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Enrollment</th>
                    <td><span ng-bind="EnrollmentDiscount"></span></td>
                    <td><span ng-bind="EnrollmentTotalBeforeDiscount"></span></td>
                    <td><span ng-bind="EnrollmentTotalAfterDiscount"></span></td>
                </tr>
                <tr>
                    <th>Dues</th>
                    <td><span ng-bind="DuesDiscount"></span></td>
                    <td><span ng-bind="DuesTotalBeforeDiscount"></span></td>
                    <td><span ng-bind="DuesTotalAfterDiscount"></span></td>
                </tr>
                <tr>
                    <th>Sub-Totals</th>
                    <td><span ng-bind="SubTotalDiscount"></span></td>
                    <td><span ng-bind="SubTotalBeforeDiscount"></span></td>
                    <td><span ng-bind="SubTotalAfterDiscount"></span></td>
                </tr>
                <tr>
                    <th>Tax</th>
                    <td></td>
                    <td><span ng-bind="TaxBeforeDiscount"></span></td>
                    <td><span ng-bind="TaxAfterDiscount"></span></td>
                </tr>
                <tr>
                    <th>Total Initial Investment</th>
                    <td></td>
                    <td><span ng-bind="InitialInvestmentBeforeDiscount"></span></td>
                    <td><span ng-bind="InitialInvestmentAfterDiscount"></span></td>
                </tr>
                <tr>
                    <th>Standard Monthly Dues</th>
                    <td><span ng-bind="MonthlyDuesDiscount"></span></td>
                    <td><span ng-bind="MonthlyDuesBeforeDiscount"></span></td>
                    <td><span ng-bind="MonthlyDuesAfterDiscount"></span></td>
                </tr>
            </tbody>
        </table>
    </div>

    <span class="text-danger" ng-bind="status"></span>

    @*<input type="text" placeholder="Search Sites" ng-model="searchSite" />
        <table class="table">
            <thead>
                <tr>
                    <td>Site ID</td>
                    <td>Main Enrollment</td>
                    <td>Main Dues</td>
                </tr>
            </thead>
            <tr ng-repeat="r in sites | filter : searchSite">
            <tr ng-repeat="r in sites">
                <td><span ng-bind="r.siteId"></span></td>
                <td><span ng-bind="r.mainEnrollment"></span></td>
                <td><span ng-bind="r.mainDues"></span></td>
            </tr>
        </table>*@
</div>
